<template>
  <div>
    <el-form ref="form" :model="goodsForm" label-width="85px" size="small" class="goods-form">
      <el-form-item label-width="0px" class="label-title">
        <span class="label-index">1</span>
        <span>基本信息</span>
        <span class="label-tail"></span>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品名称" :required="true">
            <el-input v-model="goodsForm.name" placeholder="商品名称" style="width: 256px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="副标题">
            <el-input v-model="goodsForm.subtitle" placeholder="商品副标题" style="width: 256px;"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品分类" :required="true">
            <el-cascader
              v-model="goodsForm.classify"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              style="width: 256px;"
              placeholder="请选择商品分类"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" :required="true">
            <el-select v-model="goodsForm.supplierId" style="width: 256px;" filterable placeholder="请选择供应商" clearable>
              <el-option v-for="item in storeSupplyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0px" class="label-title">
        <span class="label-index">2</span>
        <span>购买设置</span>
        <span class="label-tail"></span>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="起批数量">
            <el-input v-model="goodsForm.num" placeholder="起批数量" style="width: 100px;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0px" class="label-title">
        <span class="label-index">3</span>
        <span>商品展示</span>
        <span class="label-tail"></span>
      </el-form-item>
      <el-row>
        <el-col :span="24">
          <el-form-item
            label="图片上传"
            :required="true"
            :class="{ isHide: imgUrlList.length === 5 }"
          >
            <goods-Uplad
              :url="storeBannerImgList"
              :limit="imgCount"
              @onsuccess="storeImgSuccessOption"
              @onremove="storeImgremoveOption"
            ></goods-Uplad>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="视频上传">
            <Video :limit="1" :url="storeBannerVideo" @onsuccess="storeVideoSuccessOption"></Video>
            <i v-if="storeBannerVideo" class="el-icon-circle-close" @click="handleRemove"></i>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0">
            <div class="tips-text">
              <p>文件上传说明：</p>
              <p>1、视频大小不超过50M，支持MP4，AVI格式，视频只能上传一个；</p>
              <p>2、单张图片大小不超过5M，支持JPG，JPEG，PNG格式，图片最多5张。</p>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label-width="0px" class="label-title">
        <span class="label-index">4</span>
        <span>商品详情</span>
        <span class="label-tail"></span>
      </el-form-item>
      <el-row>
        <el-col>
          <Rich-text ref="MyEditorContent" :introductions="goodsForm.goodsDetail" @input="richChange"></Rich-text>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Basic } from '@/api/base'
import {
  getSupplierList,
  getQueryGoods,
  delGoodsImg
} from '@/api/goods'
import goodsUplad from '@/components/upload'
import RichText from '@/components/Tinymce'
import Video from '@/components/UploadVideo/Video'
export default {
  components: {
    goodsUplad,
    RichText,
    Video
  },
  props: {
    goodsId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      goodsForm: {
        id: '',
        name: '',
        subtitle: '',
        classify: [],
        firstCategoryId: '',
        secondCategoryId: '',
        supplierId: '',
        num: '',
        fileList: [], // 商品图片列表
        video: {}, // 视屏参数
        goodsDetail: ''
      },
      options: [],
      storeBannerVideo: null,
      imgCount: 5, // 图片上传数量
      goodsProperty: [],
      storeSupplyList: [], // 供应商数据
      imgUrlList: [],
      storeBannerImgList: []
    }
  },
  mounted() {
    const vm = this
    // 获取供应商列表
    vm.seekSupply()
    // 获取分类树形
    vm.getClassifyTree()
    if (vm.goodsId) {
      vm.getgoodsInfo(vm.goodsId)
    }
  },
  methods: {
    // 获取供应商
    seekSupply() {
      getSupplierList().then(data => {
        this.storeSupplyList = data.data.map(item => {
          return {
            value: item.id,
            label: item.fullName
            // code: item.suppCode
          }
        })
      })
    },
    // 实时搜索供应商
    getStoreSupplyList(key) {
      getSupplierList({
        keyWord: key
      }).then(data => {
        this.storeSupplyList = data.data.map(item => {
          return {
            value: item.id,
            label: item.fullName
            // code: item.suppCode
          }
        })
      })
    },
    // 获取分类树结构
    getClassifyTree() {
      const vm = this
      Basic.general('GoodsCategory/selectListPage').then(res => {
        const { data } = res
        const { records = [] } = data
        vm.options = vm.initTree(records)
      })
    },
    initTree(data) {
      const vm = this
      const arr = JSON.parse(JSON.stringify(data))
      const list = []
      arr.forEach(t => {
        const item = {
          label: t.name,
          value: t.id
        }
        if (t.list.length) {
          item.children = vm.initTree(t.list)
        }
        list.push(item)
      })
      return list
    },
    handleChange(val) {
      const vm = this
      vm.goodsForm.firstCategoryId = val[0] || ''
      vm.goodsForm.secondCategoryId = val[1] || ''
    },
    // 获取商品信息
    async getgoodsInfo(id) {
      const vm = this
      const { data } = await getQueryGoods({ id: id })
      vm.goodsInit(data)
    },
    // 商品数据回显
    goodsInit(data) {
      const vm = this
      const goods = JSON.parse(JSON.stringify(data))
      vm.goodsForm.id = goods.id
      vm.goodsForm.name = goods.name || ''
      vm.goodsForm.subtitle = goods.subtitle || ''
      vm.goodsForm.firstCategoryId = goods.firstCategoryId
      vm.goodsForm.secondCategoryId = goods.secondCategoryId
      vm.goodsForm.classify = [goods.firstCategoryId, goods.secondCategoryId]
      vm.goodsForm.supplierId = goods.supplierId
      vm.goodsForm.num = goods.num
      if (goods.fileList && goods.fileList.length) {
        vm.storeBannerImgList = goods.fileList.map(t => t.fileUrl)
        vm.goodsForm.fileList = goods.fileList.map(t => {
          const item = {
            id: t.id,
            fileUrl: t.fileUrl,
            fileType: 1
          }
          return item
        })
      }
      if (goods.video) {
        const { fileUrl, id } = goods.video
        vm.storeBannerVideo = fileUrl
        vm.goodsForm.video = {
          id: id,
          fileType: 2,
          fileUrl: fileUrl
        }
      }
      vm.goodsForm.goodsDetail = goods.goodsDetail
      vm.$refs.MyEditorContent.imageSuccessCBK(goods.goodsDetail)
    },
    // 图片上传成功的回调
    storeImgSuccessOption(imgList) {
      const vm = this
      vm.imgUrlList = imgList.map(item => ({ fileUrl: item.urls, fileType: 1 }))
      if (vm.goodsForm.fileList.length && vm.goodsId) {
        vm.goodsForm.fileList = vm.goodsForm.fileList.concat(vm.imgUrlList)
      } else {
        vm.goodsForm.fileList = JSON.parse(JSON.stringify(vm.imgUrlList))
      }
    },
    // 删除图片
    storeImgremoveOption(val, file, fileList) {
      const vm = this
      vm.goodsForm.fileList.forEach((item, index) => {
        if (item.fileUrl === file.urls) {
          vm.goodsForm.fileList.splice(index, 1)
          if (item.id) {
            delGoodsImg({ id: item.id }).then(res => {})
          }
        }
      })
      // 删除新增的图片
      if (file.response) {
        vm.goodsForm.fileList.forEach((item, index) => {
          if (item.fileUrl === file.response.data.fileUrl) {
            vm.goodsForm.fileList.splice(index, 1)
          }
        })
      }
    },
    // 视屏上传成功
    storeVideoSuccessOption(val) {
      const vm = this
      vm.goodsForm.video = {
        fileUrl: val,
        fileType: 2
      }
      vm.storeBannerVideo = val
    },
    // 删除视屏
    handleRemove() {
      const vm = this
      vm.goodsForm.video.fileUrl = null
      this.storeBannerVideo = null
      if (vm.goodsForm.video.id) {
        delGoodsImg({ id: vm.goodsForm.video.id }).then(res => {})
      }
    },
    // 商品详情事件--富文本
    richChange(val) {
      this.goodsForm.goodsDetail = val
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-form-item {
//   width: 60%;
// }
.goods-form {
  width: 890px;
  // background: #ccc;
}
.tips-text p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: #999;
}
.isHide /deep/ .el-upload--picture-card {
  display: none;
}
.text-end {
  font-size: 14px;
  line-height: 33px;
}
.full-width {
  width: 100%;
  line-height: 33px;
}
.el-icon-circle-close {
  font-size: 24px;
  position: relative;
  bottom: 134px;
  left: 122px;
  color: white;
}
.el-icon-circle-close:hover {
  background: #323842;
  border-radius: 50%;
}
/* input numbel属性去除上下按键 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 小模块标题 */
.label-title {
  margin: 10px 0 20px;
  span {
    float: left;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    // font-weight: bold;
    color: #333;
    font-size: 15px;
    line-height: 24px;
  }
  .label-index {
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    border: 1px solid #005aa0;
    border-radius: 24px;
    margin-right: 8px;
    font-weight: normal;
    color: #fff;
    background: #005aa0;
  }
  .label-tail {
    width: 160px;
    height: 12px;
    margin-left: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
}
</style>
